<template>
    <el-card>
        <el-row>
            <el-col :span="12" style="display: flex;">
                <el-input v-model="search" :prefix-icon="Search" placeholder="管理员昵称" />
                <el-button round color="#feed37">查询</el-button>
                <el-button round color="#feed37" @click="dialogTableVisible = true">
                    新增角色
                </el-button>
                <el-button round color="#feed37">导入</el-button>
                <el-button round color="#feed37">导出</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table :data="manager" style="width: 100% " stripe>
            <!-- 管理员头像 -->
            <el-table-column label="管理员头像" width="100" align="center">
                <template #default="{ row }">
                    <el-avatar :size="50" :src="row.avatar">
                    </el-avatar>
                </template>
            </el-table-column>
            <!-- ID -->
            <el-table-column label="管理员ID" width="100" align="center">
                <template #default="{ row }">
                    {{ row.id }}
                </template>
            </el-table-column>
            <!-- 管理员 -->
            <el-table-column label="管理员" width="200" align="center">
                <template #default="{ row }">
                    {{ row.username }}
                </template>
            </el-table-column>
            <!-- 所属角色 -->
            <el-table-column label="所属角色" width="402" align="center">
                <template #default="{ row }">
                    {{ row.role.name }}
                </template>
            </el-table-column>
            <!-- 状态 -->
            <el-table-column prop="state" label="状态" width="120">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @click="changeStatus" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template #default>
                    <el-button link type="primary" size="small">修改</el-button>
                    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" :icon="WarningFilled" icon-color="red"
                        title="是否要删除该管理员?" @confirm="confirmEvent" @cancel="cancelEvent">
                        <template #reference>
                            <el-button link type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination small v-model:current-page="config.page" background layout="prev, pager, next" :total="config.total"
            style="margin-top: 40px; margin-left: 40%;" @current-change="handleCurrentChange" />
    </el-card>
    <el-dialog v-model="dialogTableVisible" title="新增管理员">
        <!-- 弹出框 form表单 -->
        <el-form ref="form" :model="sizeForm" label-width="auto" :label-position="labelPosition" :size="size">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="sizeForm.username" class="w-50 m-2" placeholder="用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="sizeForm.password" placeholder="密码" />
            </el-form-item>
            <el-form-item label="所属角色">
                <el-select v-model="value" placeholder="选择所属角色">
                    <el-option v-for="item in options" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="sizeForm.status" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="onSubmit" round color="#feed37">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup >
import { ref, computed, reactive, onMounted } from 'vue'
import { managerListApi } from '@/api/login'
import { Search, WarningFilled } from '@element-plus/icons-vue'
// 添加管理员接口
import { managerApi } from '@/api/login'
// 删除管理员接口
import { delManagerApi } from '@/api/login'
const size = ref('default')
const labelPosition = ref('left')
const value = ref()
// form 表单参数
let sizeForm = reactive({
    username: '',
    password: '',
    status: null,
    role_id: 38
})
const id = ref()
const options = [
    {
        value: '超级管理员',
        label: '超级管理员',
    },
    {
        value: '运营',
        label: '运营',
    },
    {
        value: '测试',
        label: '测试',
    },
    {
        value: '销售',
        label: '销售',
    },
    {
        value: '技术',
        label: '技术',
    },
    {
        value: '普通管理员',
        label: '普通管理员',
    }
]
const handleClick = () => {
    console.log('click')
}
const confirmEvent = () => {
    delManagerApi(id.value).then(res => {
        if (res.data.msg === 'ok') {
            console.log('delManagerApi', res);
            ElMessage({
                message: '删除角色成功',
                type: 'success',
            })
            getManager()
        }
    })
}
const cancelEvent = () => {
    console.log('取消!')
}
// 搜索框
const search = ref('')
// const filtermanager = computed(() =>
//     tableData.filter(
//         (data) =>
//             !search.value ||
//             data.name.toLowerCase().includes(search.value.toLowerCase())
//     )
// )
// 防抖
let t = null
function changeStatus() {
    if (t !== null) {
        clearTimeout(t)
    }
    t = setTimeout(() => {
        ElNotification({
            message: '修改状态成功',
            type: 'success',
        })
    }, 500)
}
const manager = ref([])
const config = reactive({
    total: 0,
    page: 1, // 当前页
    limit: 5 // 每页显示条数
})
// 模态框的显示和隐藏
const dialogTableVisible = ref(false)
const form = ref()
// 总页数
const total = ref()
managerListApi(config.page).then(res => {
    if (res.data.msg === 'ok') {
        console.log('manager', res);
        console.log('manager1', res.data.data.list);
        const managerSon = res.data.data.list
        manager.value = managerSon
        config.total = res.data.data.totalCount
    }
})

function handleCurrentChange(newPage) {
    // console.log('newPage', newPage);
    config.page = newPage

    getManager()
}
function onSubmit() {
    // console.log('submit!')
    // 调用添加管理员接口
    managerApi(sizeForm).then(res => {
        if (res.data.msg === 'ok') {
            id.value = +res.data.data.id
            // console.log('id', id.value);
            // console.log('res', res);
            // console.log('managerApi', res);
            ElMessage({
                message: '添加角色成功',
                type: 'success',
            })
            // 添加成功后 删除input 中的数据
            form.value.resetFields()
            dialogTableVisible.value = false
            getManager()
        }

    })

}
const getManager = () => {
    managerListApi(config.page).then(res => {
        if (res.data.msg === 'ok') {
            console.log('manager', res);
            console.log('manager1', res.data.data.list);
            const managerSon = res.data.data.list
            manager.value = managerSon
            config.total = res.data.data.totalCount
        }
    })
}
</script>
<style scoped></style>